<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fireworks</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
        }

        #canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Firework {
            constructor(x, y, targetX, targetY, color) {
                this.x = x;
                this.y = y;
                this.targetX = targetX;
                this.targetY = targetY;
                this.color = color;
                this.speed = Math.random() * 3 + 2;
                this.distanceToTarget = Math.sqrt((targetX - x) ** 2 + (targetY - y) ** 2);
                this.distanceTraveled = 0;
                this.coordinates = [];
                this.coordinateCount = 5;
                while (this.coordinateCount--) {
                    this.coordinates.push([this.x, this.y]);
                }
            }

            update() {
                this.coordinates.pop();
                this.coordinates.unshift([this.x, this.y]);
                const dx = this.targetX - this.x;
                const dy = this.targetY - this.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                const vx = (dx / distance) * this.speed;
                const vy = (dy / distance) * this.speed;
                this.distanceTraveled += Math.sqrt(vx * vx + vy * vy);
                this.x += vx;
                this.y += vy;
            }

            draw() {
                ctx.beginPath();
                ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
                ctx.lineTo(this.x, this.y);
                ctx.strokeStyle = this.color;
                ctx.lineWidth = 2;
                ctx.stroke();
            }

            hasReachedTarget() {
                return this.distanceTraveled >= this.distanceToTarget;
            }
        }

        class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.size = Math.random() * 3 + 1;
                this.speedX = (Math.random() - 0.5) * 6;
                this.speedY = (Math.random() - 0.5) * 6;
                this.alpha = 1;
                this.fadeSpeed = 0.02;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                this.alpha -= this.fadeSpeed;
            }

            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.restore();
            }

            isDead() {
                return this.alpha <= 0;
            }
        }

        const fireworks = [];
        const particles = [];

        function createFirework(x, y) {
            const startX = Math.random() * canvas.width;
            const startY = canvas.height;
            const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
            fireworks.push(new Firework(startX, startY, x, y, color));
        }

        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            fireworks.forEach((firework, index) => {
                firework.update();
                firework.draw();
                if (firework.hasReachedTarget()) {
                    for (let i = 0; i < 50; i++) {
                        particles.push(new Particle(firework.targetX, firework.targetY, firework.color));
                    }
                    fireworks.splice(index, 1);
                }
            });

            particles.forEach((particle, index) => {
                particle.update();
                particle.draw();
                if (particle.isDead()) {
                    particles.splice(index, 1);
                }
            });

            if (Math.random() < 0.02) {
                const targetX = Math.random() * canvas.width;
                const targetY = Math.random() * canvas.height * 0.7;
                createFirework(targetX, targetY);
            }

            requestAnimationFrame(animate);
        }

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        canvas.addEventListener('click', (event) => {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            createFirework(x, y);
        });

        animate();
    </script>
</body>

</html>
    